<template>
  <a-form
    ref="formRef"
    :model="formState"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-item label="设备名" name="name">
      <a-input v-model:value="formState.name" />
    </a-form-item>
    <a-form-item label="类型" name="type">
      <a-select v-model:value="formState.type" placeholder="请选择类型">
        <a-select-option
          v-for="item in DeviceTypeList"
          :value="item"
          :key="item"
          >{{ item }}</a-select-option
        >
      </a-select>
    </a-form-item>
    <a-form-item label="部门" name="department">
      <a-select v-model:value="formState.department" placeholder="请选择部门">
        <a-select-option
          v-for="item in DeviceDepartmentList"
          :value="item"
          :key="item"
          >{{ item }}</a-select-option
        >
      </a-select>
    </a-form-item>
    <a-form-item label="品牌" name="brand">
      <a-input v-model:value="formState.brand" />
    </a-form-item>
    <a-form-item label="唯一标记码" name="sn">
      <a-input v-model:value="formState.sn" :disabled="true" />
    </a-form-item>
    <a-form-item label="入库时间" name="inboundAt">
      <a-date-picker
        v-model:value="inboundAt"
        type="date"
        placeholder="Pick a date"
        style="width: 100%"
      />
    </a-form-item>
    <a-form-item label="设备登记时间" name="registrationAt">
      <a-date-picker
        v-model:value="registrationAt"
        type="date"
        placeholder="Pick a date"
        style="width: 100%"
      />
    </a-form-item>
    <div class="flex justify-end">
      <a-button type="danger" @click="generate">自动生成</a-button>
    </div>
  </a-form>
</template>
<script lang="ts">
import { DeviceDepartmentList, DeviceTypeList } from "@/@types/enum";
import { generateDeviceModifyForm } from "@/api/mock/cloud";
import { updateDevice } from "@/controller/Cloud";
import { CloudDevice, CloudDeviceUpdateForm } from "model";
import moment, { Moment } from "moment";
import {
  defineComponent,
  reactive,
  ref,
  toRaw,
  UnwrapRef,
  PropType,
  watchEffect,
} from "vue";
export default defineComponent({
  name: "ModifyEdgexForm",
  props: {
    device: {
      type: Object as PropType<CloudDevice>,
      required: true,
    },
  },
  setup(props) {
    const formRef = ref();
    const formState: UnwrapRef<CloudDeviceUpdateForm> = reactive({
      id: props.device.id,
      name: props.device.name,
      code: props.device.code,
      type: props.device.type,
      department: props.device.department,
      brand: props.device.brand,
      sn: props.device.sn,
      inboundAt: props.device.inboundAt,
      registrationAt: props.device.registrationAt,
      status: props.device.status,
    });
    const inboundAt = ref<Moment>(moment());
    const registrationAt = ref<Moment>(moment());
    watchEffect(() => {
      formState.inboundAt = inboundAt.value.format("YYYY-MM-DD");
    });
    watchEffect(() => {
      formState.registrationAt = registrationAt.value.format("YYYY-MM-DD");
    });
    const generate = () => {
      Object.assign(formState, generateDeviceModifyForm());
      inboundAt.value = moment(formState.inboundAt);
      registrationAt.value = moment(formState.registrationAt);
    };
    const rules = {
      name: [
        {
          required: true,
          message: "请输入设备名",
          trigger: "blur",
        },
      ],
      type: [
        {
          required: true,
          message: "请输入设备类型",
          trigger: "blur",
        },
      ],
      department: [
        {
          required: true,
          message: "请输入设备部门",
          trigger: "blur",
        },
      ],
      brand: [
        {
          required: true,
          message: "请输入设备品牌",
          trigger: "blur",
        },
      ],
      sn: [
        {
          required: true,
          message: "请输入设备唯一标示码",
          trigger: "blur",
        },
      ],
    };
    const onSubmit = async (): Promise<boolean> => {
      return await formRef.value
        .validate()
        .then(async () => {
          await updateDevice(toRaw(formState));
          return true;
        })
        .catch(() => {
          return false;
        });
    };
    return {
      formRef,
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      other: "",
      formState,
      rules,
      onSubmit,
      location,
      inboundAt,
      registrationAt,
      generate,
      DeviceDepartmentList,
      DeviceTypeList,
    };
  },
});
</script>
